<template>
  <div :class="$style.query">
    <FormContainer :column="4">
      <el-form ref="form" :model="formData" :rules="formRules" label-width="80px">
        <el-form-item prop="emailAddresseeList" :label="receive?'发送邮箱':'接收邮箱'">
          <el-input v-model.trim="formData.emailAddresseeList" placeholder="请输入邮箱" clearable />
        </el-form-item>
        <el-form-item v-if="!receive" prop="group" label="业务组">
          <el-select v-model="formData.group" placeholder="请选择业务组" filterable clearable @change="changeHandle">
            <el-option v-for="(g,i) in groupList" :key="i" :label="g.groupName" :value="g.groupNo" />
          </el-select>
        </el-form-item>
        <el-form-item prop="theme" label="邮件主题">
          <el-select v-model="formData.theme" placeholder="请选择邮件主题" remote :remote-method="getEmailTitle" filterable clearable>
            <el-option v-for="(e,i) in emailTitle" :key="i" :label="e.theme" :value="e.theme" />
          </el-select>
        </el-form-item>
        <el-form-item prop="sendDate" :label="receive?'收件时间':'发件时间'">
          <el-date-picker v-model="formData.sendDate" type="daterange" opt start-placeholder="开始时间" end-placeholder="结束时间" clearable />
        </el-form-item>
        <el-form-item v-if="!receive" prop="sender" label="发送坐席">
          <el-select v-model="formData.sender" placeholder="请选择业务组后再选择发送坐席" remote :remote-method="getBusinessMembers" :disabled="formData.group===''" filterable clearable>
            <el-option v-for="(s,i) in statffList" :key="i" :label="`${s.staffName}(${s.accountNo})`" :value="s.accountNo" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <Button type="primary" enter @click="submitHandle">查询</Button>
        </el-form-item>
      </el-form>
    </FormContainer>
  </div>
</template>
<script>
import FormContainer from '@/components/FormContainer'
import Button from '@/components/Button'
import { deepCopy } from '@/utils'
import { filtersRaw, pageRequsetBody } from '@/utils'
import { getBusinessMembers } from '@/api/business'
import { mapGetters } from 'vuex'
import { pageEmailTheme } from '@/api/email'
import { parseTime, date24 } from '@/utils'
export default {
  name: 'Query',
  components: {
    FormContainer,
    Button
  },
  props: {
    receive: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formData: {
        emailAddresseeList: '', // 发送邮箱
        theme: '', // 邮件主题
        sendDate: [], // 收件时间
        sender: '', // 发送坐席
        group: '' // 业务组
      },
      formRules: {
      },
      statffList: [], // 员工
      emailTitle: [] // 邮件主题
    }
  },
  computed: {
    ...mapGetters(['groupList'])
  },
  created() {
    this.getEmailTitle('')
  },
  methods: {
    changeHandle() {
      this.$set(this.formData, 'theme', '')
      this.$set(this.formData, 'sender', '')
      this.getBusinessMembers('')
      this.getEmailTitle('')
    },
    submitHandle() {
      const data = deepCopy(this.formData)
      const t = []
      let v = data.sendDate || []
      if (v.length > 1) {
        t.push(
          filtersRaw('sendDate', parseTime(v[0]), '>'),
          filtersRaw('sendDate', parseTime(date24(v[1])), '<=')
        )
      }
      if (!this.receive) {
        v = data.group
        if (!v) {
          v = `[${this.groupList.map(e => e.groupNo).join(',')}]`
        }
        t.push(filtersRaw('groupNo', v, 'in'))
        v = data.sender
        if (v) {
          t.push(filtersRaw('sender', v, '='))
        }
      }
      v = data.theme
      if (v) {
        t.push(filtersRaw('theme', v, 'like'))
      }
      v = data.emailAddresseeList
      if (v) {
        t.push(filtersRaw('emailAddresseeList', v, 'in'))
      }
      this.$emit('refresh', t)
    },
    // 获取员工
    getBusinessMembers(v) {
      this.statffList = []
      // 判断是汉字还是字母
      let f = {}
      if (/^[a-zA-Z]+[\d]*$/.test(v)) {
        f = filtersRaw('accountNo', v, 'like')
      } else {
        f = filtersRaw('staffName', v, 'like')
      }
      const data = {
        pageFlag: true,
        filtersRaw: [
          f
          // filtersRaw('pinyinshort', v, 'like'),
          // filtersRaw('accountNo', v, 'like'),
          // filtersRaw('staffCode', v, 'like'),
          // filtersRaw('platformNo', v, 'like')
        ]
      }
      const id = this.getGroupId()
      if (!id) {
        return
      }
      getBusinessMembers(pageRequsetBody(data), id).then(res => {
        this.statffList = res.data.records
      })
    },
    // 邮件主题
    getEmailTitle(v) {
      this.emailTitle = []
      let g = this.formData.group
      if (!v) {
        g = this.groupList.map(e => e.groupNo).join(',')
      }
      const data = {
        filtersRaw: [
          filtersRaw('theme', v, 'like'),
          filtersRaw('group', g, 'in')
        ]
      }
      if (this.receive) {
        data.filtersRaw.push(filtersRaw('type', 2, '='))
      } else {
        data.filtersRaw.push(filtersRaw('type', 1, '='))
      }
      pageEmailTheme(pageRequsetBody(data)).then(res => {
        this.emailTitle = res.data.records
      })
    },
    // 获取组id
    getGroupId() {
      for (const item of this.groupList) {
        if (item.groupNo === this.formData.group) {
          return item.id
        }
      }
      return ''
    }
  }
}
</script>
<style lang='scss' module>
.query{

}
</style>
